<template>
  <div>
    <div class="pk-view">
      <div class="pk-left">
        <div class="pk-first-box">{{menuData.teamMemberTitle}}</div>
        <div class="base-title">{{menuData.baseInforTitle}}</div>
        <div class="menu-box">
          <div
            class="menu"
            v-for="(item,index) in menuData.baseInforMenu"
            :key="index"
          >{{item.label}}</div>
        </div>
        <div class="base-title">{{menuData.waterTitle}}</div>
        <div class="menu-box">
          <div class="menu" v-for="(item,index) in menuData.waterMenu" :key="index">{{item.label}}</div>
        </div>

        <div class="base-title">{{menuData.landTitle}}</div>
        <div class="menu-box">
          <div class="menu" v-for="(item,index) in menuData.landMenu" :key="index">{{item.label}}</div>
        </div>

        <div class="base-title">{{menuData.shapeTitle}}</div>
        <div class="menu-box">
          <div class="menu" v-for="(item,index) in menuData.shapeMenu" :key="index">{{item.label}}</div>
        </div>
        <div class="base-title">{{menuData.maxPowerTitle}}</div>
        <div class="menu-box">
          <div
            class="menu"
            v-for="(item,index) in menuData.maxPowerMenu"
            :key="index"
          >{{item.label}}</div>
        </div>

        <div class="base-title">{{menuData.powerEndurTitle}}</div>
        <div class="menu-box">
          <div
            class="menu"
            v-for="(item,index) in menuData.powerEndurMenu"
            :key="index"
          >{{item.label}}</div>
        </div>

        <div class="base-title">{{menuData.qualityTitle}}</div>
        <div class="menu-box">
          <div class="menu" v-for="(item,index) in menuData.qualityMenu" :key="index">{{item.label}}</div>
        </div>
      </div>
      <div class="pk-right" v-for="(item,index) in characterList"  :key='index'>
        <div class="pk-right-box">
          <div class="pk-right-main">
            <div class="base-info-box">
              <div class="base-infor-main">
                <div class="head-img-box">
                  <img :src="item.imgUrl" alt />
                </div>
                <div>
                  <el-select
                    v-model="item.id"
                    clearable
                    @change="onChangeProgram(index, $event)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(dict,inx) in item.characterOptions"
                      :disabled="!(item.id == dict.id || !selectIdsArr.includes(dict.id))"
                      :key="inx"
                      :label="dict.name"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.sex}}</div>
              <div class="menu-data">{{item.age}}</div>
              <div class="menu-data">{{item.level}}</div>
              <div class="menu-data">{{item.trainingTime}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.first}}</div>
              <div class="menu-data">{{item.second}}</div>
              <div class="menu-data">{{item.third}}</div>
              <div class="menu-data">{{item.fourth}}</div>
              <div class="menu-data">{{item.fifth}}</div>
              <div class="menu-data">{{item.sixth}}</div>
              <div class="menu-data">{{item.seventh}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.twoKil}}</div>
              <div class="menu-data">{{item.fourKil}}</div>
              <div class="menu-data">{{item.sixKil}}</div>
              <div class="menu-data">{{item.eightKil}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.height}}</div>
              <div class="menu-data">{{item.weight}}</div>
              <div class="menu-data">{{item.armSpread}}</div>
              <div class="menu-data">{{item.sitHigh}}</div>
              <div class="menu-data">{{item.tinyLegLength}}</div>
              <div class="menu-data">{{item.legLength}}</div>
              <div class="menu-data">{{item.shoulderWidth}}</div>
              <div class="menu-data">{{item.bust}}</div>
              <div class="menu-data">{{item.hipline}}</div>
              <div class="menu-data">{{item.waistline}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.benchPress}}</div>
              <div class="menu-data">{{item.wola}}</div>
              <div class="menu-data">{{item.hardPull}}</div>
              <div class="menu-data">{{item.squat}}</div>
              <div class="menu-data">{{item.highTurnover}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.threeBenchPress}}</div>
              <div class="menu-data">{{item.threeWola}}</div>
              <div class="menu-data">{{item.threeAbdomen}}</div>
              <div class="menu-data">{{item.threeSquat}}</div>
              <div class="menu-data">{{item.abdominalMuscles}}</div>
              <div class="menu-data">{{item.dorsalMuscle}}</div>
              <div class="menu-data">{{item.staticViaduct}}</div>
              <div class="menu-data">{{item.pullUp}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.verticalJump}}</div>
              <div class="menu-data">{{item.sitForward}}</div>
              <div class="menu-data">{{item.thirtymeterRun}}</div>
              <div class="menu-data">{{item.threeThousandMeter}}</div>
              <div class="menu-data">{{item.threeStepJump}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pk-right" v-for="(item,index) in characterList"  :key='index'>
        <div class="pk-right-box">
          <div class="pk-right-main">
            <div class="base-info-box">
              <div class="base-infor-main">
                <div class="head-img-box">
                  <img :src="item.imgUrl" alt />
                </div>
                <div>
                  <el-select
                    v-model="item.id"
                    clearable
                    @change="onChangeProgram(index, $event)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(dict,inx) in item.characterOptions"
                      :disabled="!(item.id == dict.id || !selectIdsArr.includes(dict.id))"
                      :key="inx"
                      :label="dict.name"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.sex}}</div>
              <div class="menu-data">{{item.age}}</div>
              <div class="menu-data">{{item.level}}</div>
              <div class="menu-data">{{item.trainingTime}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.first}}</div>
              <div class="menu-data">{{item.second}}</div>
              <div class="menu-data">{{item.third}}</div>
              <div class="menu-data">{{item.fourth}}</div>
              <div class="menu-data">{{item.fifth}}</div>
              <div class="menu-data">{{item.sixth}}</div>
              <div class="menu-data">{{item.seventh}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.twoKil}}</div>
              <div class="menu-data">{{item.fourKil}}</div>
              <div class="menu-data">{{item.sixKil}}</div>
              <div class="menu-data">{{item.eightKil}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.height}}</div>
              <div class="menu-data">{{item.weight}}</div>
              <div class="menu-data">{{item.armSpread}}</div>
              <div class="menu-data">{{item.sitHigh}}</div>
              <div class="menu-data">{{item.tinyLegLength}}</div>
              <div class="menu-data">{{item.legLength}}</div>
              <div class="menu-data">{{item.shoulderWidth}}</div>
              <div class="menu-data">{{item.bust}}</div>
              <div class="menu-data">{{item.hipline}}</div>
              <div class="menu-data">{{item.waistline}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.benchPress}}</div>
              <div class="menu-data">{{item.wola}}</div>
              <div class="menu-data">{{item.hardPull}}</div>
              <div class="menu-data">{{item.squat}}</div>
              <div class="menu-data">{{item.highTurnover}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.threeBenchPress}}</div>
              <div class="menu-data">{{item.threeWola}}</div>
              <div class="menu-data">{{item.threeAbdomen}}</div>
              <div class="menu-data">{{item.threeSquat}}</div>
              <div class="menu-data">{{item.abdominalMuscles}}</div>
              <div class="menu-data">{{item.dorsalMuscle}}</div>
              <div class="menu-data">{{item.staticViaduct}}</div>
              <div class="menu-data">{{item.pullUp}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.verticalJump}}</div>
              <div class="menu-data">{{item.sitForward}}</div>
              <div class="menu-data">{{item.thirtymeterRun}}</div>
              <div class="menu-data">{{item.threeThousandMeter}}</div>
              <div class="menu-data">{{item.threeStepJump}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pk-right" v-for="(item,index) in characterList" :key='index'>
        <div class="pk-right-box">
          <div class="pk-right-main">
            <div class="base-info-box">
              <div class="base-infor-main">
                <div class="head-img-box">
                  <img :src="item.imgUrl" alt />
                </div>
                <div>
                  <el-select
                    v-model="item.id"
                    clearable
                    @change="onChangeProgram(index, $event)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="dict in item.characterOptions"
                      :disabled="!(item.id == dict.id || !selectIdsArr.includes(dict.id))"
                      :key="dict.name"
                      :label="dict.name"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.sex}}</div>
              <div class="menu-data">{{item.age}}</div>
              <div class="menu-data">{{item.level}}</div>
              <div class="menu-data">{{item.trainingTime}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.first}}</div>
              <div class="menu-data">{{item.second}}</div>
              <div class="menu-data">{{item.third}}</div>
              <div class="menu-data">{{item.fourth}}</div>
              <div class="menu-data">{{item.fifth}}</div>
              <div class="menu-data">{{item.sixth}}</div>
              <div class="menu-data">{{item.seventh}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.twoKil}}</div>
              <div class="menu-data">{{item.fourKil}}</div>
              <div class="menu-data">{{item.sixKil}}</div>
              <div class="menu-data">{{item.eightKil}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.height}}</div>
              <div class="menu-data">{{item.weight}}</div>
              <div class="menu-data">{{item.armSpread}}</div>
              <div class="menu-data">{{item.sitHigh}}</div>
              <div class="menu-data">{{item.tinyLegLength}}</div>
              <div class="menu-data">{{item.legLength}}</div>
              <div class="menu-data">{{item.shoulderWidth}}</div>
              <div class="menu-data">{{item.bust}}</div>
              <div class="menu-data">{{item.hipline}}</div>
              <div class="menu-data">{{item.waistline}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.benchPress}}</div>
              <div class="menu-data">{{item.wola}}</div>
              <div class="menu-data">{{item.hardPull}}</div>
              <div class="menu-data">{{item.squat}}</div>
              <div class="menu-data">{{item.highTurnover}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.threeBenchPress}}</div>
              <div class="menu-data">{{item.threeWola}}</div>
              <div class="menu-data">{{item.threeAbdomen}}</div>
              <div class="menu-data">{{item.threeSquat}}</div>
              <div class="menu-data">{{item.abdominalMuscles}}</div>
              <div class="menu-data">{{item.dorsalMuscle}}</div>
              <div class="menu-data">{{item.staticViaduct}}</div>
              <div class="menu-data">{{item.pullUp}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.verticalJump}}</div>
              <div class="menu-data">{{item.sitForward}}</div>
              <div class="menu-data">{{item.thirtymeterRun}}</div>
              <div class="menu-data">{{item.threeThousandMeter}}</div>
              <div class="menu-data">{{item.threeStepJump}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pk-right" v-for="(item,index) in characterList" :key='index'>
        <div class="pk-right-box">
          <div class="pk-right-main">
            <div class="base-info-box">
              <div class="base-infor-main">
                <div class="head-img-box">
                  <img :src="item.imgUrl" alt />
                </div>
                <div>
                  <el-select
                    v-model="item.id"
                    clearable
                    @change="onChangeProgram(index, $event)"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(dict,inx) in item.characterOptions"
                      :disabled="!(item.id == dict.id || !selectIdsArr.includes(dict.id))"
                      :key="inx"
                      :label="dict.name"
                      :value="dict.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.sex}}</div>
              <div class="menu-data">{{item.age}}</div>
              <div class="menu-data">{{item.level}}</div>
              <div class="menu-data">{{item.trainingTime}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.first}}</div>
              <div class="menu-data">{{item.second}}</div>
              <div class="menu-data">{{item.third}}</div>
              <div class="menu-data">{{item.fourth}}</div>
              <div class="menu-data">{{item.fifth}}</div>
              <div class="menu-data">{{item.sixth}}</div>
              <div class="menu-data">{{item.seventh}}</div>
            </div>
            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.twoKil}}</div>
              <div class="menu-data">{{item.fourKil}}</div>
              <div class="menu-data">{{item.sixKil}}</div>
              <div class="menu-data">{{item.eightKil}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.height}}</div>
              <div class="menu-data">{{item.weight}}</div>
              <div class="menu-data">{{item.armSpread}}</div>
              <div class="menu-data">{{item.sitHigh}}</div>
              <div class="menu-data">{{item.tinyLegLength}}</div>
              <div class="menu-data">{{item.legLength}}</div>
              <div class="menu-data">{{item.shoulderWidth}}</div>
              <div class="menu-data">{{item.bust}}</div>
              <div class="menu-data">{{item.hipline}}</div>
              <div class="menu-data">{{item.waistline}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.benchPress}}</div>
              <div class="menu-data">{{item.wola}}</div>
              <div class="menu-data">{{item.hardPull}}</div>
              <div class="menu-data">{{item.squat}}</div>
              <div class="menu-data">{{item.highTurnover}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.threeBenchPress}}</div>
              <div class="menu-data">{{item.threeWola}}</div>
              <div class="menu-data">{{item.threeAbdomen}}</div>
              <div class="menu-data">{{item.threeSquat}}</div>
              <div class="menu-data">{{item.abdominalMuscles}}</div>
              <div class="menu-data">{{item.dorsalMuscle}}</div>
              <div class="menu-data">{{item.staticViaduct}}</div>
              <div class="menu-data">{{item.pullUp}}</div>
            </div>

            <div class="empty-line">&nbsp;</div>
            <div class="menu-data-box">
              <div class="menu-data">{{item.verticalJump}}</div>
              <div class="menu-data">{{item.sitForward}}</div>
              <div class="menu-data">{{item.thirtymeterRun}}</div>
              <div class="menu-data">{{item.threeThousandMeter}}</div>
              <div class="menu-data">{{item.threeStepJump}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { matchbetter, traingpk,PhysicalQualityPK } from "@/api/monitor/logininfor";

export default {
  data() {
    return {
      list:[
      {
        name:"基本信息",
        sex:["性别","年龄","级别","训练年限"],
        mark1:["","","",""],
        mark2:["","","",""],
        mark3:["","","",""],
        mark4:["","","",""],
      },
      {
        name:"水上专项训练PK",
        sex:["1X","2X","2-","4X","4-","8+","L2X"],
        mark1:["","","",""],
        mark2:["","","",""],
        mark3:["","","",""],
        mark4:["","","",""],
      }
    ],
      menuData: {
        teamMemberTitle: "队员信息",
        baseInforTitle: "基本信息",
        baseInforMenu: [
          {
            // 基本信息的左边
            label: "性别",
          },
          {
            label: "年龄",
          },
          {
            label: "级别",
          },
          {
            label: "训练年限",
          },
        ],
        waterTitle: "水上专项训练PK",
        waterMenu: [
          {
            label: "1X",
          },
          {
            label: "2X",
          },
          {
            label: "2-",
          },
          {
            label: "4X",
          },
          {
            label: "4-",
          },
          {
            label: "8+",
          },
          {
            label: "L2X",
          },
        ],
        landTitle: "陆上专项训练（测功仪）PK",
        landMenu: [
          {
            label: "2000米",
          },
          {
            label: "4000米",
          },
          {
            label: "6000米",
          },
          {
            label: "8000米",
          },
        ],
        shapeTitle: "身体形态PK",
        shapeMenu: [
          {
            label: "身高",
          },
          {
            label: "体重",
          },
          {
            label: "臂展",
          },
          {
            label: "坐高",
          },
          {
            label: "小腿长",
          },
          {
            label: "腿长",
          },
          {
            label: "肩宽",
          },
          {
            label: "胸围",
          },
          {
            label: "臀围",
          },
          {
            label: "腰围",
          },
        ],
        maxPowerTitle: "最大力量PK",
        maxPowerMenu: [
          {
            label: "卧推",
          },
          {
            label: "卧拉",
          },
          {
            label: "硬拉",
          },
          {
            label: "深蹲",
          },
          {
            label: "高翻",
          },
        ],
        powerEndurTitle: "力量耐力PK",
        powerEndurMenu: [
          {
            label: "3min卧推(25kg)",
          },
          {
            label: "3min卧拉(30kg)",
          },
          {
            label: "3min收腹",
          },
          {
            label: "3min深蹲(40kg)",
          },
          {
            label: "腹肌耐力",
          },
          {
            label: "背肌耐力",
          },
          {
            label: "静力高架背肌",
          },
          {
            label: "引体向上最大次数",
          },
        ],
        qualityTitle: "基本身体素质PK",
        qualityMenu: [
          {
            label: "垂直纵跳",
          },
          {
            label: "坐位体前屈",
          },
          {
            label: "30米跑",
          },
          {
            label: "3000米跑",
          },
          {
            label: "三级跳远",
          },
        ],
      },
      characterList: [
        {
          imgUrl: "/static/img/profile.473f5971.jpg",
          id: "", // 下拉框的值
          characterOptions: [],
          first: "1X",
          second: "2X",
          third: "2-",
          fourth: "4X",
          fifth: "4-",
          sixth: "8+",
          seventh: "L2X",
          twoKil: "2000", // 2000米
          fourKil: "4000", // 4000米
          sixKil: "6000", // 6000米
          eightKil: "8000", // 8000米
          sex: "男",
          age: "17",
          level: "1",
          trainingTime: "2020-02",
          height: "身高", // 身高
          weight: "体重", // 体重
          armSpread: "臂展", // 臂展
          sitHigh: "坐高", // 坐高
          tinyLegLength: "小腿长", // 小腿长
          legLength: "腿长", // 腿长
          shoulderWidth: "肩宽", // 肩宽
          bust: "胸围", // 胸围
          hipline: "臂围", // 臂围
          waistline: "腰围", // 腰围
          benchPress: "卧推", // 卧推
          wola: "卧拉", // 卧拉
          hardPull: "硬拉", // 硬拉
          squat: "深蹲", // 深蹲
          highTurnover: "高翻", // 高翻,
          threeBenchPress: "3min卧推(25kg)", // 3min卧推(25kg)
          threeWola: "3min卧拉(30kg)", // 3min卧拉(30kg)
          threeAbdomen: "3min收腹", // 收腹
          threeSquat: "3min深蹲", // 深蹲
          abdominalMuscles: "腹肌耐力", // 腹肌耐力
          dorsalMuscle: "背肌耐力", // 背肌耐力
          staticViaduct: "静力高价腹肌", // 静力高价腹肌
          pullUp: "引体向上最大次数", // 引体向上最大次数
          verticalJump: "垂直纵跳", // 垂直纵跳
          sitForward: "坐位体前屈", // 坐位体前屈
          thirtymeterRun: "30米跑", // 30米跑
          threeThousandMeter: "3000米跑", // 3000米跑
          threeStepJump: "三级跳远", // 三级跳远
        },
      ],
      statusOptions1: [],
      selectIdsArr: [],
    };
  },
  components: {},
  methods: {
    onChangeProgram(index, val) {
      this.selectIdsArr = [];
      for (const item of this.characterList) {
        if (item.id) {
          this.selectIdsArr.push(item.id);
        }
      }
      if (!val) {
        this.characterList[index] = {
          characterOptions: [...this.statusOptions1],
        };
      } else {
        for (let i = 0; i < this.statusOptions1.length; i++) {
          if (val == this.statusOptions1[i].id) {
           
            let obj = { ...this.characterList[index] };
            this.characterList[index] = {
              ...obj,
              characterOptions: [...this.statusOptions1],
              age: 1,
              imgUrl: "/static/img/profile.473f5971.jpg",
            };
          }
        }
      }
      let id = this.$route.query.id;
        traingpk(id).then((res)=>{
          console.log(res);
        })
    },

  },
  created() {
    // let id = this.$route.query.id;
    let id = this.$route.query.id;
    matchbetter().then((res) => {
      
      for (let i = 0; i < this.characterList.length; i++) {
        this.characterList[i].characterOptions = res.rows;
        this.statusOptions1 = res.rows;
      }
      for (let i = 0; i < res.rows.length; i++) {
        if (res.rows[i].id == id) {
          this.characterList[0] = { ...this.characterList[0], ...res.rows[i] };
        }
      }
      this.selectIdsArr = [];
      for (const item of this.characterList) {
        if (item.id) {
          this.selectIdsArr.push(item.id);
        }
      }
    });
  },
};
</script>
<style scoped>
.pk-view {
  display: flex;
  text-align: center;
  /* padding-left: 228px; */
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pk-left {
  width: 260px;
}
.pk-first-box {
  height: 260px;
  line-height: 260px;
  text-align: center;
  background: #f8f8f9;
  border: 1px solid #dddfe6;
}
.pk-right {
  width: 260px;
}
.pk-right-box {
  display: flex;
  width: 260px;
}
.pk-right-main {
  flex: 1;
}
.base-title {
  width: 260px;
  padding: 20px;
}
.menu-box {
  border-top: 1px solid #dddfe6;
  border-left: 1px solid #dddfe6;
  border-right: 1px solid #dddfe6;
}
.menu {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #f4f5f9;
  border-bottom: 1px solid #dddfe6;
}
.menu-data {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #dddfe6;
  border-right: 1px solid #dddfe6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-data-box {
  border-top: 1px solid #dddfe6;
}
.base-info-box {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #dddfe6;
  border-top: 1px solid #dddfe6;
  border-bottom: 1px solid #dddfe6;
}
.head-img-box {
  width: 180px;
  height: 180px;
  margin-bottom: 12px;
}
.head-img-box img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.base-infor-main {
  width: 180px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-line {
  padding: 20px;
}
</style>
